<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>附件上传与下载</title>
    <script src="../../js/header.js"></script>
    <style type="text/css">
        html, body, #annex {
            padding: 0px;
            margin: 0px;
            width: 100%;
        }

        #annex {
            /*background-attachment: fixed;*/
            overflow: hidden;
        }

        .tab-title {
            font-size: 16px;
            font-weight: bold;
            border-left: 4px solid #0D9AFF;
            font-family: PingFangSC-Medium;
            padding-left: 10px;
            margin-bottom: 20px;
        }

        .el-dialog__footer {
            padding: 10px 20px 20px;
            text-align: center;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .el-dialog__body {
            color: rgb(96, 98, 102);
            font-size: 14px;
            word-break: break-all;
            padding: 0px 20px;
        }

        #excel {
            display: none;
        }

        .el-input__inner {
            -webkit-appearance: none;
            background-color: #FFF;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #DCDFE6;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 30px;
            line-height: 30px;
            outline: 0;
            padding: 0 15px;
            -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
            transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        }

        .listed .el-form-item__label {
            letter-spacing: 3px;
        }

        .el-textarea {
            width: 95%;
        }

        #annex .el-input {
            width: 80%;
        }

        /* 搜索按钮样式修改 */
        #annex .el-button.is-circle.search_btn {
            position: absolute;
            right: 0;
            top: 0;
            border: 0;
            background: none;
        }

        #annex .el-button.is-circle.search_btn i {
            font-size: 17px;
        }

        .v-modal {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: .5;
            background: transparent;
        }
    </style>
</head>
<body>
<div v-cloak id="annex">
    <div v-if="flag=='0'">
        <!--<el-row>
        	<el-col :span="2">
            	<el-button type="primary" size="mini" style="width:80px;" @click="selectFile()" disabled>选择文件</el-button>
            	<input type="file" id="excel"ref="head" @change="checkType()" enctype="multipart/form-data"/>
            </el-col>
            <el-col :span="5">
                <el-input v-model="fileName" disabled></el-input>
            </el-col>
            <el-col :span="3">
            	<el-button type="primary" size="mini" @click="uploadExcel()" icon="el-icon-upload2 el-icon-right" disabled>上传</el-button>
        	</el-col>
        </el-row>-->

        <el-table :data="tableData" border style="width: 100%;"
                  :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <!-- <el-table-column type="selection" ></el-table-column>-->
            <!--<el-table-column
                    prop="uuid"
                    label="UUID"
                    width="200"
                    align="center" >
            </el-table-column>-->
            <el-table-column
                    prop="filename"
                    label="文件名称"
                    width=""
                    align="center">
            </el-table-column>
            <!--<el-table-column
                    prop="fileurl"
                    label="文件路径"
                    width="200"
                    align="center" >
            </el-table-column>-->
            <el-table-column
                    prop="filesize"
                    label="文件大小"
                    width="300"
                    align="center">
            </el-table-column>

            <el-table-column
                    label="操作"
                    width="300"
                    align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="down(scope.$index,scope.row)">下载</el-button>
                    <el-button type="danger" disabled size="mini" @click="del(scope.$index,scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div v-if="flag=='1'">
        <el-row>
            <el-col>
                <el-button type="primary" size="mini" style="width:150px;" @click="selectFile()">选择文件</el-button>
                <input type="file" id="excel" ref="head" @change="checkType()" enctype="multipart/form-data"/>

                <el-input v-model="fileName" style="width: 30%;"></el-input>
                <el-button type="primary" size="mini" @click="uploadExcel()" icon="el-icon-upload2 el-icon-right">上传
                </el-button>
            </el-col>
        </el-row>

        <el-table :data="tableData" border style="width: 100%;margin-top: 10px;"
                  :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <!-- <el-table-column type="selection" ></el-table-column>-->
            <!--<el-table-column
                    prop="uuid"
                    label="UUID"
                    width="200"
                    align="center" >
            </el-table-column>-->
            <el-table-column
                    prop="filename"
                    label="文件名称"
                    width=""
                    align="center">
            </el-table-column>
            <!--<el-table-column
                    prop="fileurl"
                    label="文件路径"
                    width="200"
                    align="center" >
            </el-table-column>-->
            <el-table-column
                    prop="filesize"
                    label="文件大小"
                    width="300"
                    align="center">
            </el-table-column>

            <el-table-column
                    label="操作"
                    width="300"
                    align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="down(scope.$index,scope.row)">下载</el-button>
                    <el-button type="danger" size="mini" @click="del(scope.$index,scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#annex',
        data() {
            return {
                uuid: '',
                flag: '',
                fileName: '',
                tableData: [],
            }
        },
        mounted() {
            var url = window.location.href;
            this.uuid = url.split("?")[1].split("&")[0].split("=")[1];
            this.flag = url.split("?")[1].split("&")[1].split("=")[1];
            this.getData();
        },
        methods: {
            getData() {
                var pagesize = this.pagesize;
                var pageno = this.currentPage;
                axios({
                    method: 'get',
                    url: '/dzjap/ud/selectId',
                    params: {
                        "id": this.uuid
                    }
                })
                    .then(response => {
                        let data = response.data;
                        if (data.code == 200) {
                            this.tableTotal = data.data.total;// 数据长度
                            this.tableData = data.data;

                        } else {

                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            selectFile() {
                this.$refs.head.click();
            },
            checkType() {
                let file = this.$refs.head.files[0];
                this.fileName = file.name;
            },
            //上传
            uploadExcel() {
                let that = this;
                let formData = new FormData();
                let file = this.$refs.head.files[0];
                if (file == "" || file == undefined) {
                    this.$message("请选择要上传的文件");
                    return;
                }
                formData.append('file', file);
                formData.append('id', this.uuid);
                axios({
                    url: "/dzjap/ud/save",
                    method: "post",
                    enctype: 'multipart/form-data',
                    data: formData,
                    processData: false, //重要
                    contentType: false, //重要
                    dataType: 'json'
                }).then((res) => {
                    if (res.data.code == "200") {
                        this.$message({
                            message: '上传成功',
                            type: 'success'
                        });
                        this.getData();
                    } else {
                        this.$message.error('上传失败');
                    }
                }).catch(() => {
                    this.$message.error('上传失败!')
                });

                // return false  //屏蔽了action的默认上传
            },
            //下载/////////////////////////////////////////////////////////////////////////////////////////
            down: function (index, row) {
                var fileName = row.filename;
                var newname = row.tableName;
                window.location.href = "/dzjap/ud/download?id=" + row.uuid;
            },
            /* down(index, row) {
                console.log(row.uuid);
                this.$confirm('确定要下载吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: 'post',
                        url: '/dzjap/ud/download',
                        params: {
                            id: row.uuid
                        }
                    }).then((res) => {
                        if (res.status == 200) {
                            this.getData();
                            this.$message({
                                type: 'success',
                                message: '下载成功!'
                            });
                            // window.location.href= res.data.data;
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消下载'
                    });
                });
            },*/
            //删除
            del(index, row) {
                this.$confirm('确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: 'post',
                        url: '/dzjap/ud/del',
                        params: {
                            id: row.uuid
                        }
                    }).then((res) => {
                        if (res.data.code == 200) {
                            this.tableData.splice(index, 1);
                            this.getData();
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    });
                });
            },

            //每页下拉显示数据
            handleSizeChange(size) {
                this.pagesize = size;
                this.getData();
                /*console.log(this.pagesize) */
            },
            //点击第几页
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage;
                this.getData();
            }
        }
    })

</script>
</html>